<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="./css/layer.css">
   <link rel="stylesheet" href="./css/editword.css">
   <title>新年贺卡</title>
   <script>
      (function (win, doc) {
         if (!win.addEventListener) return;
         var html = document.documentElement;
         function setFont() {
            var html = document.documentElement;
            var k = 750;
            html.style.fontSize = html.clientWidth / k * 100 + "px";
         }
         setFont();
         setTimeout(function () {
            setFont()
         }, 300);
         doc.addEventListener('DOMContentLoaded', setFont, false);
         win.addEventListener('resize', setFont, false);
         win.addEventListener('load', setFont, false);
      })(window, document);
   </script>
   <style>
      html,
      body {
         margin: 0;
         padding: 0;
         height: 100%;
      }
   </style>
</head>

<body>
   <div id="main">
      <div class='content'>
         <!-- <image src='./image/newHk.jpg'></image> -->
         <div class='inputFrom'>
            <div class='zitiSty'>在新春到来之际</div>
            <div class='iptSty'>
               <input placeholder='请输入您的姓名' class="iptColor" @blur="inputBlur" v-model="name1"></input>
            </div>
            <div class='zitiSty'>祝您</div>
            <div class=''>
               <!-- <div id="choose" value="">您可以选择祝福语</div> -->
               <div class="zhufubox">
                  <div class="zhu">
                     <div class="zhufu" v-for="(item,index) in textArr" :key="index" @click="choose(index)">
                        <div ref="name3" v-html="item"></div>
                     </div>
                  </div>
               </div>
            </div>

            <div class='iptSty'>
               <div class="tarea iptColor" contenteditable="true" @blur="inputBlur" ref="name2" placeholder="请输入祝福语">
               </div>
            </div>

            <div class="hint">
               <div class="hint-item"> <i></i>
                  <div>请输入您的姓名和祝福语，姓名不写亦可，然后点击生成图片贺卡按钮。</div>
               </div>
               <div class="hint-item"> <i></i>
                  <div>在生成成功的图片上长按，可以发送好友或保存到手机相册分享朋友圈。</div>
               </div>
               <div class="hint-item"> <i></i>
                  <div>若你同时选择和输入了祝福语，最终会以输入的为主。</div>
               </div>
            </div>

            <div class='btnBar'>
               <!-- <div v-on:click='preview'>
                  预览效果按钮
               </div>
               <div v-on:click='tipShare'>
                  发给好友
               </div> -->
               <div v-on:click='showSharePage'>
                  生成图片贺卡
               </div>
            </div>

            <!-- <div>
               <div>输入完成后点击预览</div>
            </div> -->

         </div>
      </div>

      <canvas id='share_canvas' style="display:none">您的浏览器不支持该功能，请更换浏览器尝试！</canvas>
      <div v-bind:class='[sharePageShow ? "share_page_show" : "share_page_hide"]'>
         <div class='share_page'>
            <image v-bind:src='imgdata'></image>
            <div class='btn_cric_view'>长按图片发送好友或保存到手机相册分享朋友圈
               <image class="close_btn" v-on:click="closeSharePage" src="image/close_btn.png"></image>
            </div>
         </div>
      </div>


   </div>

   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
   <script src="./js/layer.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
   <script src="./js/vue.js"></script>
   <script>
      $(function () {

         document.body.addEventListener('touchmove', function (e) {
            //e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
         }, {
            passive: false
         }); //passive 参数不能省略，用来兼容ios和android

      })

      var app = new Vue({
         el: "#main",
         data: {
            key: '',
            apiHost: 'https://www.qyino.com/coupon/',
            isLoad: true,
            isDisable: true,
            name1: '',
            name2: '',
            name3: '',
            sharePageShow: false,
            imgdata: '',
            textArr: ['身体健康<br>万事如意<br>阖家幸福<br>鼠年大吉!', '心情愉快朋友多<br>身体健康福气多<br>鼠年吉祥生意多!', '鼠不尽的健康<br>鼠不尽的财富<br>鼠不尽的幸福<br>如期而至!']
         },
         methods: {
            preview: function () {
               if (!this.iptCheck()) {
                  return;
               }
               window.location.href = "./index.html?key=" + app.key;
            },
            closeSharePage: function () {
               app.sharePageShow = false;
            },
            showSharePage: function () {
               // if (!this.iptCheck()) {
               //    return;
               // }
               var index = layer.open({ type: 2, content: '合成中...' });
               let that = this;
               let txt2 = '';
               (function getTxt() {
                  if (that.$refs.name2.innerText) {
                     txt2 = that.$refs.name2.innerText;
                     return
                  }

                  if (that.$refs.name2.innerText == '' && that.name3) {
                     txt2 = that.name3;
                  }
                  if (that.$refs.name2.innerText == '' && that.name3 == '') {
                     txt2 = "一家和和睦睦\n一年开开心心\n一生快快乐乐\n一世平平安安"
                     return
                  }
               })()
               // let txt2 = that.$refs.name2.innerText || "一家和和睦睦\n一年开开心心\n一生快快乐乐\n一世平平安安";
               $.ajax({
                  url: this.apiHost + "setZhongxinStr",
                  data: {
                     str: this.name1 + "%" + txt2,
                  },
                  success: function (res) {
                     console.log(res);
                     if (res.success) {
                        app.key = res.data;

                        //获取网页可见区域宽高
                        let bodyWidth = document.body.clientWidth;
                        let bodyHeight = document.body.clientHeight;
                        let canvas = document.getElementById('share_canvas');
                        //canvas.width = bodyWidth;
                        //canvas.height = bodyHeight;

                        if (canvas.getContext) {
                           let ctx = canvas.getContext("2d");
                           //创建新的图片对象
                           let img = new Image();
                           //指定图片的URL
                           img.src = "https://www.qyino.com/share_img_2020.png";
                           img.setAttribute("crossorigin", 'anonymous');

                           //浏览器加载图片完毕后再绘制图片
                           img.onload = function () {
                              canvas.width = img.width;
                              canvas.height = img.height;
                              let imgwidth = img.width;
                              let imgheight = img.height;
                              //以Canvas画布上的坐标(图片路径，画布X坐标，画布Y坐标，图片宽度，图片高度)绘制图像
                              ctx.drawImage(img, 0, 0, img.width, img.height);

                              //绘制文字this.name1 && this.$refs.name2.innerText
                              let txt = that.name1 + "祝您:";
                              let txtPostion = 0.41;
                              let fontsize = 55;
                              ctx.fillStyle = "#fefb99";
                              ctx.font = fontsize + "px 楷体";
                              ctx.textBaseline = "top";
                              ctx.textAlign = "center";
                              ctx.fillText(txt, imgwidth / 2, imgheight * txtPostion);


                              let txtArray = txt2.split("\n");
                              let array = [];
                              //去除空行
                              for (let i = 0; i < txtArray.length; i++) {
                                 if (txtArray[i]) {
                                    array.push(txtArray[i]);
                                 }
                              }

                              let beginx = imgwidth / 2;
                              let beginy = imgheight * 0.46;
                              for (let i = 0; i < array.length; i++) {
                                 let lineNumber = parseInt(array[i].length / 10);
                                 for (let j = 0; j < lineNumber + 1; j++) {
                                    ctx.fillStyle = "#fefb99";
                                    ctx.font = "52px 楷体";
                                    ctx.textBaseline = "top";
                                    ctx.textAlign = "center";
                                    ctx.fillText(array[i].substr(j * 10, 10), beginx, beginy);
                                    beginy += 68;
                                 }
                              }

                              //绘制二维码
                              let img2 = new Image();
                              img2.src = app.apiHost + "genERWEIQRCode?key=" + res.data;
                              img2.setAttribute("crossorigin", 'anonymous');
                              img2.onload = function () {
                                 let qrcodeWidth = imgwidth * 0.145; //计算二维码宽度
                                 let leftOffset = imgwidth * 0.44; //计算左边偏移量
                                 let topOffset = imgheight * 0.76; //计算顶部偏移量
                                 ctx.drawImage(img2, leftOffset, topOffset, qrcodeWidth,
                                    qrcodeWidth);
                                 //生成图片本地地址
                                 let imageUrl = canvas.toDataURL("image/jpeg");
                                 app.imgdata = imageUrl;
                                 app.sharePageShow = true;
                                 layer.close(index);
                              }

                           };
                        }
                     }
                  }
               });

            },

            tipShare: function () {
               if (this.iptCheck()) {
                  layer.open({
                     content: '请点击右上角分享',
                     skin: 'msg',
                     time: 2 //2秒后自动关闭
                  });
               }
            },
            iptCheck: function () {
               if (!this.name1) {
                  layer.open({
                     content: '您没有输入姓名',
                     skin: 'msg',
                     time: 2 //2秒后自动关闭
                  });
                  return;
               }
               if (!this.$refs.name2.innerText) {
                  console.log(2);
                  layer.open({
                     content: '您没有输入祝福语',
                     skin: 'msg',
                     time: 2 //2秒后自动关闭
                  });
                  return;
               }
               return true;
            },
            configWxShare: function () {
               if (!this.name1 || !this.$refs.name2.innerText) {
                  return;
               }

               app.name2 = this.$refs.name2.innerText;
               let url = window.location.href;

               $.ajax({
                  url: this.apiHost + "setZhongxinStr",
                  data: {
                     str: this.name1 + "%" + this.$refs.name2.innerText,
                  },
                  success: function (res) {
                     console.log(res);
                     if (res.success) {
                        app.key = res.data;
                     }
                  }
               });

            },
            saveToPhone: function () {
               let canvas = document.getElementById('share_canvas');
               // console.log(canvas.toDataURL());
               //生成图片本地地址
               let imageUrl = canvas.toDataURL("image/jpeg");
               app.imgdata = imageUrl;
               // 创建一个a元素
               let a = document.createElement('a')
               // 创建一个单击事件
               let event = new MouseEvent('click')

               // 将a的download属性设置为我们想要下载的图片名称，或使用‘---’作为默认名称
               a.download = name || '下载图片'
               // 将生成的URL设置为a.href属性
               a.href = imageUrl
               // 触发a的单击事件
               a.dispatchEvent(event);
               layer.open({
                  content: '已经保存到相册',
                  skin: 'msg',
                  time: 2 //2秒后自动关闭
               });
            },
            inputBlur() {
               window.scrollTo(0, 0)
            },
            focusIpt() {
               //$('.zhufubox').show()
            },
            blurIpt() {
               //$('.zhufubox').fadeOut(1000);
               $('.zhufu').css('backgroundColor', '#f2f2f2');
            },
            choose(e) {

               let zhu = $($('.zhufubox .zhufu'))

               let text = ''
               for (var i = 0; i < zhu.length; i++) {
                  console.log(i)
                  $(zhu[i]).removeClass('bg')
                  if (i == e) {
                     //   zhu[i].style.backgroundColor="#f00";
                     //   zhu[i].style.color="#fff"
                     $(zhu[i]).addClass('bg')
                     // console.log(zhu[i].innerText);
                     text = zhu[i].innerText
                  }
               }
               this.name3 = text
               console.log(this.name3)
            }
         }
      });

      $.ajax({
         url: app.apiHost + 'getJsapiConfig',
         data: {
            url: window.location.href
         },
         success: (res) => {
            console.log(res);
            wx.config({
               debug: false, // 开启调试模式
               appId: 'wx57b343c8e4dafd12', // 必填，公众号的唯一标识
               timestamp: res.data.timestamp, // 必填，生成签名的时间戳
               nonceStr: res.data.noncestr, // 必填，生成签名的随机串
               signature: res.data.signature, // 必填，签名
               jsApiList: res.data.jsApiList // 必填，需要使用的JS接口列表
            });
         }
      });

      //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
      wx.ready(function () { //需在用户可能点击分享按钮前就先调用
         /*wx.updateAppMessageShareData({
			title: app.name1 + '送给您的新春祝福', // 分享标题
			desc: '送给您的新春祝福', // 分享描述
			link: 'https://www.qyino.com/greetingcard/index.html?key=957', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: 'https://www.qyino.com/greetingcard/image/logo1.png', // 分享图标
			success: function () {
			   // 设置成功
			   alert("成功"+app.name1)
			}
		 });
		 
		 wx.updateTimelineShareData({
			title: app.name1 + '送给您的新春祝福', // 分享标题
			desc: '送给您的新春祝福', // 分享描述
			link: 'https://www.qyino.com/greetingcard/index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: 'https://www.qyino.com/greetingcard/image/logo1.png', // 分享图标
			success: function () {
			   // 设置成功
			   alert("成功"+app.name1)
			}
		 });*/

         let obj = {
            title: '新春祝福', // 分享标题
            desc: "中信期货祝您春节快乐", // 分享描述
            link: 'https://www.qyino.com/greetingcard/index.html?key=957',
            imgUrl: 'https://www.qyino.com/greetingcard/image/logo1.png', // 分享图标
            success: function () {
               // 设置成功
            }
         };
         wx.onMenuShareTimeline(obj);

         wx.onMenuShareAppMessage(obj);

         wx.onMenuShareQQ(obj);

         wx.onMenuShareWeibo(obj);


         wx.onMenuShareQZone(obj);
      });
   </script>
</body>

</html>